import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm'

// DOM容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

// 返回的是promise对象， 点击取消销毁组件，点确认销毁组件
export default ({
  title,
  text
}) => {
  //  1.导入被创建的组件
  //  2.使用createVNode创建虚拟节点
  //  3.准备一个dom容器装载组件
  //  3.使用render函数渲染组件到容器
  return new Promise((resolve, reject) => {
    // 点击取消触发函数
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消'))
    }
    // 点击确认触发函数
    const submitCallback = () => {
      render(null, div)
      resolve()
    }
    // 1. 渲染组件
    // 2. 点击确认按钮，触发resolve同时销毁组件
    // 3. 点击取消按钮，触发reject同时销毁组件
    const vn = createVNode(XtxConfirm, {
      title,
      text,
      cancelCallback,
      submitCallback
    })
    render(vn, div)
  })
}
